<!DOCTYPE html>
<html>
<meta charset="UTF-8" />
<meta name="renderer" content="webkit">
<head>
<title>在线设备</title>
<link href="/vendor/bootstrap/css/bootstrap.css" rel="stylesheet">
<script src="/vendor/jquery/jquery-1.10.2.min.js"></script>
<script src="/js/lib/jquery-confirm.js"></script>
<link href="/css/lib//jquery-confirm.css" rel="stylesheet">
<script src="/js/common.js"></script>
<link href="/css/common.css" rel="stylesheet">
<script type="text/javascript">
	$(function() {
		var st = setInterval(function() {
			$(".bar-inner").each(function() {
				var processBar = $(this)
				var h = processBar.attr('h')
				h = (parseFloat(h) + 0.02).toFixed(2)
				if (h > 100) {
					h = 1;
				}
				processBar.attr('h', h);
				processBar.css('height', h + '%')
				processBar.html(h + '%')
			});
		}, 1000);
		var nameIndex=1
		
		$(".flot-div").each(
				
				function() {
					var div = $(this)
					var city='东莞'
					var type='SLA'
					var pow='10W'
					var area='600x600x600mm'
					if(nameIndex%2==0){
						type='SLM'
						pow='500W'
						area='250x250x400mm'
					}
					if(nameIndex>4){
						city='西安'
					}
					//添加设备信息
					div.after('<div class="dev-info flot-div">'
							+ '<p>设备名称：V'+nameIndex+'T-'+city+'</p>'
							+ '<p>设备类型：'+type+'</p>'
							+ '<p>加工范围：'+area+'</p>'
							+ '<p>激光最大功率：'+pow+'</p>'
							+ '<p>光斑直径：0.1mm</h3>'
							+ '<p>加工层厚范围：0.02-1.0mm</p>' 
							+ '</p>')
					nameIndex=nameIndex+1
				});

	})
	//5, 123, 5, 0.3
</script>
<style type="text/css">
html, body {
	background-color: #152349;
	color: white !important;
}

.panel-backgroud {
	background: #162a5f;
}
.graph-container {
	position: relative;
	/* required Y axis stuff, Graph Holder's left and bottom sides to be positions properly */
	display: inline-block;
	/* display: table may also work.. */
	padding: 0;
	/* let the bars position themselves */
	list-style: none;
	/* we don't want to see any default <ul> markers */
	margin: 40px 0 40px 40px;
	font-size: 0.6em;
	background-repeat: no-repeat;
	background-position: 0 -2.5em;
}

.graph-container:before {
	position: absolute;
	content: "";
	bottom: 0;
	left: -1.25em;
	width: 12em;
	height: 2.5em;
	background-color: rgba(156, 150, 150, 0.8);
	transform: skew(-45deg);
}

.graph-container>li {
	float: left;
	position: relative;
}

.graph-container>li:first-child {
	margin-left: 1em;
}

.bar-wrapper {
	overflow: hidden;
}

.bar-container {
	position: relative;
	margin-top: 2.5em;
	width: 12.5em;
}

.bar-container:before {
	content: "";
	position: absolute;
	z-index: 3;
	bottom: 0;
	right: 5em;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 2.5em 2.5em;
	border-color: transparent transparent rgba(183, 183, 183, 0.1);
}

.bar-background {
	width: 5em !important;
	background-color: rgba(160, 160, 160, 0.2);
	height: 100%;
	position: absolute;
	top: -2.5em;
	left: 2.5em;
	z-index: 1;
}

.bar-background:before {
	background-color: rgba(160, 160, 160, .2);
	bottom: -2.5em;
	right: 1.25em;
	width: 10em;
	height: 2.5em;
	transform: skew(-45deg);
	content: "";
	position: absolute;
}

.bar-background:after {
	background-color: rgba(160, 160, 160, .05);
	top: 1.25em;
	right: 10em;
	width: 2.5em;
	height: 100%;
	transform: skew(0deg, -45deg);
	content: "";
	position: absolute;
}

.bar-inner {
	position: absolute;
	text-align: center;
	width: 5em !important;
	background-color: rgba(3, 169, 244, 0.2);
	transition: height 0s ease-out, bottom 0s ease-out !important;
	bottom: 0em !important;
	z-index: 2;
	top: auto;
	color: white !important;
}

.bar-inner:after {
	background-color: rgba(3, 169, 244, 0.5) !important;
}

.bar-foreground:before, .bar-foreground:after, .bar-inner:before,
	.bar-inner:after {
	content: "";
	position: absolute;
}

.bar-foreground:before, .bar-inner:before {
	top: -1.25em;
	right: -2.5em;
	width: 2.5em;
	height: 100%;
	background-color: rgba(160, 160, 160, 0.27);
	transform: skew(0deg, -45deg);
}

.bar-foreground:after, .bar-inner:after {
	top: -2.5em;
	right: -1.25em;
	width: 100%;
	height: 2.5em;
	background-color: rgba(160, 160, 160, 0.35);
	transform: skew(-45deg);
}

.bar-inner:before {
	background-color: rgba(3, 169, 244, 0.2);
}

.graph-container:after {
	position: absolute;
	content: "";
	top: 1.25em;
	left: -2.5em;
	width: 2.5em;
	background-color: rgba(5, 123, 5, 0.0) !important;
	transform: skew(0deg, -45deg);
}

.bar-foreground, .bar-inner {
	width: 5em !important;
}

.bar-foreground {
	position: absolute;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(160, 160, 160, 0.1) !important;
}
/*主div区域*/
.my-main {
	margin-left: 1%;
	margin-bottom: 1%;
	float: left;
	width: 32%;
	background-color: #162a5f;
}
/*模型高度*/
.graph-container .bar-container, .graph-container:after,
	.graph-container>li:last-child {
	height: 20em !important;
}

.flot-div {
	float: left;
}

.dev-info {
	color: white;
	margin: 30px 0 0 30px;
	border: 1px solid white;
	padding: 1em;
}
</style>
</head>

<body>
	<!-- 数据展示 -->
	<div class="nav text-center">
		<h2>在线设备</h2>
	</div>
	<br/>
	<div class="container-fuil">
		<div class="my-main">
			<div class="flot-div">
				<ul class="graph-container">
					<li>
						<div class="bar-wrapper">
							<div class="bar-container">
								<div class="bar-background"></div>
								<div id="process-w" class="bar-inner" h="68" style="height: 68%; color: blue">68%</div>
								<div class="bar-foreground"></div>
							</div>
						</div>
					</li>
					<li></li>
				</ul>
			</div>
		</div>
		<div class="my-main">
			<div class="flot-div">
				<ul class="graph-container">
					<li>
						<div class="bar-wrapper">
							<div class="bar-container">
								<div class="bar-background"></div>
								<div id="process-w" class="bar-inner" h="90" style="height: 90%; color: blue">90%</div>
								<div class="bar-foreground"></div>
							</div>
						</div>
					</li>
					<li></li>
				</ul>
			</div>
		</div>
		<div class="my-main">
			<div class="flot-div">
				<ul class="graph-container">
					<li>
						<div class="bar-wrapper">
							<div class="bar-container">
								<div class="bar-background"></div>
								<div id="process-w" class="bar-inner" h="15" style="height: 15%; color: blue">15%</div>
								<div class="bar-foreground"></div>
							</div>
						</div>
					</li>
					<li></li>
				</ul>
			</div>
		</div>
		<div class="my-main">
			<div class="flot-div">
				<ul class="graph-container">
					<li>
						<div class="bar-wrapper">
							<div class="bar-container">
								<div class="bar-background"></div>
								<div id="process-w" class="bar-inner" h="25" style="height: 25%; color: blue">25%</div>
								<div class="bar-foreground"></div>
							</div>
						</div>
					</li>
					<li></li>
				</ul>
			</div>
		</div>
		<div class="my-main">
			<div class="flot-div">
				<ul class="graph-container">
					<li>
						<div class="bar-wrapper">
							<div class="bar-container">
								<div class="bar-background"></div>
								<div id="process-w" class="bar-inner" h="25" style="height: 25%; color: blue">25%</div>
								<div class="bar-foreground"></div>
							</div>
						</div>
					</li>
					<li></li>
				</ul>
			</div>
		</div>
		<div class="my-main">
			<div class="flot-div">
				<ul class="graph-container">
					<li>
						<div class="bar-wrapper">
							<div class="bar-container">
								<div class="bar-background"></div>
								<div id="process-w" class="bar-inner" h="25" style="height: 25%; color: blue">25%</div>
								<div class="bar-foreground"></div>
							</div>
						</div>
					</li>
					<li></li>
				</ul>
			</div>
		</div>
		<div style="clear: both;"></div>
	</div>
	<br />
</body>

</html>